<template>
  <div class="tool-box">
    <span class="tool-btn__play-or-pause" :class="playing ? 'pause' : 'play'" @click="onPlay"></span>
    <span class="tool-btn__reset" @click="onReset"></span>
    <span class="tool-btn__speed" @click="onSpeed">{{ speedValue }}x</span>
  </div>
</template>

<script>
export default {
  name: 'timeline-tool',
  props: {
    // 倍速
    speed: {
      type: Number,
      default: 1,
    },
    // 播放、暂停状态
    playing: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      speedValue: 0,
    };
  },
  watch: {
    speed: {
      handler(val) {
        this.speedValue = val;
      },
      immediate: true,
    },
  },
  methods: {
    /**
     * 播放或暂停
     */
    onPlay() {
      const playing = !this.playing;
      this.$emit('update:playing', playing);
      this.$emit('action', playing ? 'play' : 'pause');
    },

    onReset() {
      this.$emit('update:playing', false);
      this.$emit('action', 'reset');
    },

    /**
     *  设置播放倍速
     */
    onSpeed() {
      if (this.speedValue >= 8) {
        this.speedValue = 1;
      } else {
        this.speedValue *= 2;
      }
      this.$emit('update:speed', this.speedValue);
      this.$emit('action', 'speed');
    },
  },
};
</script>

<style lang="scss" scoped>
.tool-box {
  display: inline-flex;
  flex-direction: row;
  height: 24px;

  span {
    flex: 0 1 auto;
    display: inline-block;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
    cursor: pointer;
    transition: .2s;
    user-select: none;

    &:hover {
      transform: scale(1.2);
    }
  }

  .tool-btn__play-or-pause {
    width: 24px;

    &.play {
      background-image: url("./img/btn_play.png");
    }

    &.pause {
      background-image: url("./img/btn_pause.png");
    }
  }

  .tool-btn__reset {
    width: 24px;
    background-image: url("./img/btn_reset.png");
  }

  .tool-btn__speed {
    width: 58px;
    background-image: url("./img/btn_speed.png");
    color: #fff;
    padding-left: 30px;
    line-height: 24px;
    font-size: 13px;
  }
}
</style>
